<template>
  <div>
    <tabs
      :tabs="tabsData"
      :isFixed="scrollTop >= 0"
      :tabIndex="tabIndex"
      :selectedColor="DIYTHEME?.host_bg"
      @change="changeTab"
      :bold="true"
      itemWidth="50%"
    ></tabs>
    <div class="body fade-show" v-if="!initLoading">
      <div :class="scrollTop >= 0 ? 'order-list' : ''" v-if="!initLoading">
        <template v-if="orderList.length">
          <temlpate v-for="(item, index) in orderList" :key="index">
            <div class="order-item" @click.stop="_toDetail(item.id)">
              <div class="order-item-top">
                <div class="text-grey">{{ item.create_time }}</div>
                <div :class="`text-${item.status.color}`">
                  {{ item.status.name }}
                </div>
              </div>

              <div class="goods-item">
                <image
                  class="goods-image"
                  :src="item.order_goods.goods_image"
                  mode="aspectFill"
                ></image>
                <div class="goods-center">
                  <div class="goods-name">
                    {{ item.order_goods.goods_name }}
                  </div>
                  <div class="fz-small text-grey mt5">
                    {{ item.order_goods.sku_attr_text }}
                  </div>
                  <div class="flex between mt5">
                    <money :value="item.order_goods.price"></money>
                    <div>x{{ item.order_goods.total_num }}</div>
                  </div>
                </div>
              </div>

              <div class="cell-item">
                <div class="flex end">
                  <div class="text-grey fz-small-x">商品金额:</div>
                  <money :value="item.order_goods.total_price"></money>
                </div>
                <div class="mt5 flex end">
                  <div class="text-grey fz-small-x">实付金额:</div>
                  <money :value="item.order_goods.total_pay_price"></money>
                </div>
                <div class="order-btn">
                  <hover>
                    <div
                      class="btn detail"
                      @click.stop="_toCancel(item.id)"
                      v-if="item.status.value == 1"
                    >
                      取消
                    </div>
                  </hover>
                  <hover>
                    <div class="btn detail" @click.stop="_toDetail(item.id)">
                      查看详细
                    </div>
                  </hover>
                  <!-- 查看物流 -->
                  <template
                    v-if="item.is_deliver == 20 && item.is_user_receipt == 10"
                  >
                    <hover>
                      <div catchtap="getExpress" class="express-btn btn">
                        查看物流
                      </div>
                    </hover>
                    <hover>
                      <!-- 确认收货 -->
                      <div catchtap="receipt" class="fix-btn btn">确认收货</div>
                    </hover>
                  </template>
                </div>
              </div>
            </div>
          </temlpate>
        </template>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  onLoad,
  onPageScroll,
  onPullDownRefresh,
  onReachBottom,
  onShow,
} from "@dcloudio/uni-app";
import { ref, getCurrentInstance, onMounted, nextTick } from "vue";
import { storeToRefs } from "pinia";
import { useConfig } from "@/store";
import { listPageType, Result, ResultError } from "@/types";
import toTop from "@/components/ui/to-top/index.vue";
import loadmore from "@/components/ui/more/loadmore.vue";
import nomore from "@/components/ui/more/nomore.vue";
import { getOrderRefundList } from "@/api/order-refund";
import orderCommon from "./common";
const { DIYTHEME } = storeToRefs(useConfig());

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const initLoading = ref<boolean>(true);

const tabsData = ref<
  Array<{
    name: string;
    type: string;
  }>
>([
  {
    name: "全部",
    type: "all",
  },
  {
    name: "待处理",
    type: "-1",
  },
]);

const tabIndex = ref<number>(0);

const scrollTop = ref<number>(0);

const changeTab = (res: any) => {
  tabIndex.value = res.index;
  listPage.value.page = 1;
  toInit();
};

const orderList = ref<any>([]);

const onDetail = (id: number) => {};

const listPage = ref<listPageType>({
  page: 1,
  last: 1,
  pullUpOn: true,
  loadmore: true,
});

const toInit = () => {
  var obj: any = {};
  obj.page = listPage.value.page;
  obj.dataType = tabsData.value[tabIndex.value].type;
  getOrderRefundList(obj)
    .then((res: Result) => {
      orderList.value =
        listPage.value.page == 1
          ? res.data.list.data
          : orderList.value.concat(res.data.list.data);
      listPage.value.last = res.data.list.last_page;
      listPage.value.pullUpOn =
        res.data.list.last_page <= 1 && listPage.value.page == 1 ? false : true;
      initLoading.value = false;
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

onLoad(() => {
  toInit();
});

const { _toDetail, _toCancel } = orderCommon(toInit);
</script>

<style>
page {
  background: var(--base-page);
}
</style>

<style scoped>
.order-list {
  margin-top: 100rpx;
  margin-bottom: 100rpx;
}

.order-item {
  border-radius: var(--base-radius-default);
  width: calc(100% - 40rpx);
  margin: 20rpx 20rpx 0;
  overflow: hidden;
  background: #fff;
}
.order-item-top {
  height: 60rpx;
  line-height: 30rpx;
  padding: 10rpx 20rpx;
  display: flex;
  justify-content: space-between;
  border-bottom: 1rpx solid #f9f9f9;
  align-items: center;
}

.goods-item {
  width: 100%;
  padding: 30rpx 20rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}

.goods-image {
  width: 160rpx;
  height: 160rpx;
  display: block;
  flex-shrink: 0;
  border-radius: var(--base-radius-small);
}

.goods-center {
  flex: 1;
  padding: 0 15rpx 20rpx;
  box-sizing: border-box;
}
.goods-name {
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 32rpx;
  font-size: var(--base-size-default);
}

.cell-item {
  line-height: 35rpx;
  padding: 0 20rpx;
}

.order-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: #fff;
  padding: 40rpx 0 40rpx;
  box-sizing: border-box;
  font-size: var(--base-size-small);
}

.btn {
  height: 50rpx;
  line-height: 50rpx;
  border-radius: var(--base-radius-small);
  font-size: var(--base-size-small);
  padding: 0 20rpx;
  margin-left: 20rpx;
  white-space: nowrap;
  background: #f0f0f0;
}
</style>